let product // 全局商品,通过接口获取，用于添加购物
/**
 * 商品详情
 *    1. 获取商品id
 *        http://localhost:3000/pages/detail.html?id=51
 *    2. 根据ID查询商品详情接口
 *    3. 动态渲染商品详情数据
 */
// 1. 获取商品id
function getId() {
  let url = location.href //访问详情页url地址
  let sun = url.indexOf('?')
  sun = url.substring(sun + 1)
  let id = sun.split('=')
  id = id[1]
  return id
}
let id = getId()

// 根据ID查询商品详情接口
function productDetail() {
  axios({
    method: 'get',
    url: 'http://api.yuguoxy.com/api/shop/find',
    params: {
      id
    }
  }).then(response => {
    let data = response.data
    if (data.resultCode == 1) {
      product = data.resultInfo
      showProductDetail(product)
    }
  })
}
productDetail()

// 3. 动态渲染商品详情数据
function showProductDetail(product) {
  let str = `<div class="left">
            <div class="con">
              <img src="${product.picture}" alt="">
              <p></p>
            </div>
            <ul> `
  let strlist = product.list.map(item => {
    return `<li class="action"><img src="${item}" alt=""></li>`
  }).join('')
  let pstr = ` </ul>
              </div>
              <div class="right">
              <h2>${product.shop}</h2>
              <p><span>￥${product.price}</span></p>
              <button class="see">查看购物车</button>
              <button class="int">加入购物车</button>
              <div class="ban">
              <img src="${product.picture}" alt="" class="dan">
              </div>
              </div>`
  strlist = str + strlist + pstr
  let show = document.querySelector('.show')
  show.innerHTML = strlist
}

//区块移动
/**
   * 初始化比例
   *   遮罩层      放大镜
   *  ------- =  ------------
   *  显示盒子     背景图
   *    背景图 = 放大镜*显示盒子/遮罩层
   *
   */
//右边大图反方向运行
/**
 * 计算移动比例
 *   遮罩层移动距离        遮罩层
 *  -------------- = -----------------
 *   背景图移距离          放大镜
 *  背景图移距离X = 遮罩层移动距离x * 放大镜w/遮罩层w
 *  背景图移距离y = 遮罩层移动距离y * 放大镜h/遮罩层h
 *
 */
function move() {
  $('.show').on('mousemove', '.con', function (e) {
    e = e || window.event
    // biginit()
    //背景图 = 放大镜*显示盒子/遮罩层
    let w = $('.ban').width() * $('.con').width() / $('p').width()
    let h = $('.ban').height() * $('.con').height() / $('p').height()
    $('.dan').attr('width', `${w}px`)
    $('.dan').attr('height', `${h}px`)
    let x = e.offsetX - $('p').width() / 2
    let y = e.offsetY - $('p').height() / 2
    //边界问题
    if (x < 0) {
      x = 0
    }
    if (x > $('.con').width() - $('p').width()) {
      x = $('.con').width() - $('p').width()
    }
    if (y < 0) {
      y = 0
    }
    if (y > $('.con').height() - $('p').height()) {
      y = $('.con').height() - $('p').height()
    }
    $('p').css('left', `${x}px`)
    $('p').css('top', `${y}px`)
    $('.ban').css('display', 'block')
    //背景图移距离y = 遮罩层移动距离y * 放大镜h/遮罩层h
    let moveX = -x * $('.ban').width() / $('p').width()
    let moveY = -y * $('.ban').height() / $('p').height()
    $('.dan').css('left', `${moveX}px`)
    $('.dan').css('top', `${moveY}px`)

    // 移入显示遮罩层
    $('.show').on('mouseover', '.con', function (e) {
      $('.con>p').css('display', 'block')
      $('.ban').css('display', 'block')
    })
    //移出隐藏遮罩层
    $('.show').on('mouseout', '.con', function (e) {
      $('.con>p').css('display', 'none')
      $('.ban').css('display', 'none')
    })
  })
}
move()
//点击切换商品图片
function changeImg() {
  $('.show').on('click', 'li', function () {
    $('li').siblings().removeClass('action')
    $(this).addClass('action')
    let im = $(this).children().attr('src')
    $('.con>img').attr('src', im)
    $('.ban>img').attr('src', im)
  })
}
changeImg()
//返回首页
function bank() {
  $('header>button').on('click', function () {
    location.href = '../pages/index.html'
  })
}
bank()
//加入购物车
function intcart() {
  $('.show').on('click', '.int', function () {
    alert('添加成功')
    //从本地存储中取出数据  数据可能为空
    var List = localStorage.getItem('ipm')
    var cartList = JSON.parse(List) || []
    //判读数据中是否存在这条商品信息
let moveList=cartList.find(item=> {
    return  item.id==product.id
})
if(moveList){
  moveList.num++
}else{
    //获取商品信息
    let newPorduct = {
      id: product.id, //商品id
      name: product.product, //商品名称
      price: product.price, //单价
      url: product.picture, //图片
      num: 1, //数量
      state: false, //状态
    }
    cartList.push(newPorduct) //将新的商品信息添加到数据中
  }
    //保存到本地数据
    localStorage.setItem('ipm', JSON.stringify(cartList))
  })
}
intcart()
//查看购物车
function seecart() {
  $('.show').on('click', '.see', function () {
    location.href = '../pages/cart.html'
  })
}
seecart()